<template>
  <div class="bar-view" :id="componentId"></div>
</template>

<script>
const echarts = require("echarts");
export default {
  mounted() {
    const myChart = echarts.init(document.getElementById(this.componentId));
    const xAxisData = [];
    const data1 = [];
    const data2 = [];
    for (let i = 0; i < 100; i++) {
      xAxisData.push("类目" + i);
      data1.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5);
      data2.push((Math.cos(i / 5) * (i / 5 - 10) + i / 6) * 5);
    }

    const option = {
      title: {
        text: "柱状图动画延迟",
      },
      legend: {
        data: ["bar", "bar2"],
      },
      toolbox: {
        // y: 'bottom',
        feature: {
          magicType: {
            type: ["stack", "tiled"],
          },
          dataView: {},
          saveAsImage: {
            pixelRatio: 2,
          },
        },
      },
      tooltip: {},
      xAxis: {
        data: xAxisData,
        splitLine: {
          show: false,
        },
      },
      yAxis: {},
      series: [
        {
          name: "bar",
          type: "bar",
          data: data1,
          animationDelay: function (idx) {
            return idx * 10;
          },
        },
        {
          name: "bar2",
          type: "bar",
          data: data2,
          animationDelay: function (idx) {
            return idx * 10 + 100;
          },
        },
      ],
      animationEasing: "elasticOut",
      animationDelayUpdate: function (idx) {
        return idx * 5;
      },
    };

    myChart.setOption(option);
  },
  computed: {
    componentId() {
      return +new Date();
    },
  },
};
</script>

<style lang="less" scoped>
.bar-view {
  height: 300px;
  width: 100%;
}
</style>